<template>
	<view class="shangpinpingjia">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item-box">
					<view class="item-box-user">
						<image :src="item.userAvatar" mode="aspectFill"></image>
						<text>{{item.userName}}</text>
					</view>
					<view class="item-box-icon">
						<image src="../../static/pj_hp_1@2x.png" mode="" v-if="item.star==1"></image>
						<image src="../../static/pj_zp_1@2x.png" mode="" v-if="item.star==2"></image>
						<image src="../../static/pj_cp_1@2x.png" mode="" v-if="item.star==3"></image>
						<text>{{item.star===1?'好评' :item.star===2?'中评' :'差评'}}</text>
					</view>
				</view>
				<view class="content">
					{{item.content}}
				</view>
				<view class="image" v-if="item.img.length > 0">
					<image v-for="(tab,index1) in item.img" :key="index1" :src="tab" mode="aspectFill" @click="previewImage(item.img,item.img[index1])"></image>
				</view>
				<view class="time">
					{{item.time}}
				</view>
			</view>
			<view class="loadmore" v-if="isLoadmore">
				<u-loadmore :status="status" :icon-type="flower"/>
			</view>
			<view class="empty" v-if="showEmpty">
				<image src="../../static/kzt_logo@2x.png" mode=""></image>
				<text>暂无评价</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId:'',
				page:1,
				size:10,
				pageTotal:'',
				list:[],
				showEmpty:false,
				status: 'loading',
				isLoadmore:true,
				share:uni.getStorageSync('share')
			}
		},
		onLoad(options) {
			this.goodsId = options.goodsId
			this.getcommentsList()
		},
		methods: {
			//预览轮播图
			previewImage(list,url){
				//uniapp预览轮播图
				uni.previewImage({
					current:url, //预览图片的下标
					urls:list//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//评价
			async getcommentsList(){
				const params = {
					page:this.page,
					size:this.size,
					goodsId:this.goodsId
				}
				const res = await this.$u.api.commentsList(params)
				if (res.total < 10) {
					this.isLoadmore = false
				}
				this.status = 'nomore'
				this.list = [...this.list,...res.rows]
				this.pageTotal = Math.ceil(res.total/this.size)
				if (res.total > 0) {
					this.showEmpty = false
				}else{
					this.showEmpty = true
				}
				uni.stopPullDownRefresh()
			}

		},
		//下拉刷新
		onPullDownRefresh(){
			this.page = 1
			this.list = []
			this.getcommentsList()
		},
		//向上加载
		onReachBottom() {
			this.page = this.page + 1
			if (this.page <= this.pageTotal) {
				this.isLoadmore = true
				this.status = 'loading';
				setTimeout(()=>{
					this.getcommentsList()
				},600)
			} else{
				//this.$u.toast('没有更多数据了')
			}
		},
	}
</script>

<style scoped lang="scss">
    .list{
		padding: 0rpx 28rpx 30rpx 28rpx;
	}
	.item{
		padding: 28rpx 0rpx;
        border-bottom: 0.5px solid #EFEFEF;
	}
	.item-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.item-box-user{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item-box-user image{
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
	}
	.item-box-user text{
		margin-left: 16rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	.item-box-icon{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
        border-left: 0.5px solid #EFEFEF;
	}
	.item-box-icon image{
		width: 44rpx;
		height: 44rpx;
	}
	.item-box-icon text{
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.content{
		padding-top: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.image{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.image image{
		margin: 24rpx 20rpx 0rpx 0rpx;
		width: 122rpx;
		height: 122rpx;
	}
	.time{
		padding-top: 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
	}
	
	.empty{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
	}
	.empty image{
		width: 238rpx;
		height: 76rpx;
	}
	.empty text{
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
	}
	.loadmore{
		padding-bottom: 20rpx;
	}
</style>
